import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
// 导入请求
import { Leftnavigationbar, SecondaryClassification } from '../../api/index'
//导入并执行css样式
import "../../styles/FengLei/MyList.css"

class MyList extends Component {
    constructor(props) {//props：父组件给子组件传值用它接收
        super(props);//作用：调用父类构造函数
        // 初始化组件状态(数据)
        this.state = {
            MyList: [
                // { name: '活动专区' }, { name: '品牌' }, { name: '美容护肤' }, { name: '彩妆' }, { name: '香水' }, { name: '酒类' }, { name: '腕表首饰' }, { name: '服饰箱包' }, { name: '食品保健' }
            ],
            Main: [],
            MaxMain: [],
            currentIndex: 0
        }
    }

    // 点击获取下标
    handClick(index) {
        this.setState({//setState会将传入的新是state对象和之前旧的state对象进行合并(同名属性会覆盖处理)同时setState会触发组件更新 同时能保存是在合并的状态下
            currentIndex: index
        }, () => {
            // console.log(this.state.currentIndex);
            // 二级发请求
            SecondaryClassification({ id: this.state.MyList[this.state.currentIndex].id }).then((res) => {
                // console.log(this.state.MyList[this.state.currentIndex].id);
                console.log(res.data.subcate.subcategory);
                this.setState({ Main: res.data.subcate.subcategory })
            })
        })
    }
    // 一级发请求
    componentDidMount() {//挂载期
        Leftnavigationbar().then((res) => {//发请求
            // console.log(res.data.list[0].id);
            this.setState({ MyList: res.data.list })//请求数据
            // 页面打开就显示内容，
            SecondaryClassification({ id: res.data.list[0].id }).then((res) => {
                // console.log(this.state.MyList[this.state.currentIndex].id);
                console.log(res.data.subcate.subcategory);
                this.setState({ Main: res.data.subcate.subcategory })
            })
        })
    }

    toAllgood(id) {
        // 跳路由到所有商品页面，并且携带三级分类id
        this.props.history.push({ pathname: '/index/allgood', state: { id } })
    }
    render() {
        return (
            <div className='MyList'>
                <div>
                    {
                        //列表渲染过程中每个列表项必须有一个唯一的key值
                        this.state.MyList.map((item, index) => {
                            return (
                                // 一级分类的点击设置
                                <div style={{ color: this.state.currentIndex == index ? 'red' : '', fontWeight: this.state.currentIndex == index ? 'bold' : '' }} onClick={() => { this.handClick(index); }} className='item' key={index} >
                                    <div id={item}></div>
                                    <div className='name'>{item.name}</div>
                                </div>
                            )
                        })
                    }
                </div>
                <div className='Main'>
                    {
                        // 列表渲染过程中每个列表项必须有一个唯一的key值
                        this.state.Main.map((item, index) => {
                            return (
                                // 二级分类的点击设置
                                <div className='itemOne' key={index} >
                                    <h4>{item.name}</h4>
                                    <div className='itemtwo'>
                                        {//二级下的内容，图片
                                            item.subNavs.map((a, b) => {
                                                return (
                                                    <div key={b} onClick={() => { this.toAllgood(a.id) }}>
                                                        <img src={a.pic} alt="" />
                                                        <div className="name1">{a.name}</div>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })

                    }
                </div>
            </div >

        );

    }

}
export default withRouter(MyList);